ARIA: meter-Rolle

Ein Meter ist eine grafische Darstellung eines numerischen Werts innerhalb eines definierten Bereichs. Zum Beispiel die Anzeige des Batteriestands in Prozent. Ein Meter ist nicht geeignet für Werte, die kein sinnvolles Maximum haben. Meter sollten nicht verwendet werden, um Fortschritte anzuzeigen (zum Beispiel das Laden); hierfür sollte das <progress>-Element verwendet werden.

Jedes Element mit role="meter" muss auch eines der folgenden Attribute haben:

• Ein aria-label-Attribut.
• Ein aria-labelledby-Attribut, das auf ein Element mit Text verweist, der das Meter beschreibt.

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Zugränglichkeits-API dargestellt werden, nur Text enthalten können. Zugränglichkeits-APIs haben keine Möglichkeit, semantische Elemente innerhalb eines meter darzustellen. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachfahr-Elemente eines meter-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

Betrachten Sie zum Beispiel das folgende meter-Element, das eine Überschrift enthält.

<div role="meter"><h3>Title of my meter</h3></div>

Da Nachfahren von meter präsentativ sind, ist der folgende Code gleichbedeutend:

<div role="meter"><h3 role="presentation">Title of my meter</h3></div>

Aus der Sicht des Benutzers von unterstützender Technologie existiert die Überschrift nicht, da die vorherigen Code-Snippets im accessibility tree dem folgenden entsprechen:

<div role="meter">Title of my meter</div>

aria-valuenow

Wird auf einen Dezimalwert zwischen aria-valuemin und aria-valuemax gesetzt, der den aktuellen Wert des Meter anzeigt.

aria-valuetext

Unterstützende Technologien präsentieren den Wert von aria-valuenow oft als Prozentsatz. Wenn dies ungenau wäre, verwenden Sie diese Eigenschaft, um den Meterwert verständlich zu machen.

aria-valuemin

Wird auf einen Dezimalwert gesetzt, der den minimalen Wert darstellt und geringer ist als aria-valuemax.

aria-valuemax

Wird auf einen Dezimalwert gesetzt, der den maximalen Wert darstellt und größer ist als aria-valuemin.

Es wird empfohlen, ein natives <meter>-Element anstelle der meter-Rolle zu verwenden. Benutzeragenten stellen ein stilisiertes Widget für das <meter>-Element basierend auf dem aktuellen value in Bezug auf die min- und max-Werte bereit. Bei der Verwendung von nicht-semantischen Elementen müssen alle Funktionen des nativen semantischen Elements mit ARIA-Attributen, JavaScript und CSS nachgebildet werden.

Ein Beispiel eines Meters, das role="meter" verwendet:

<div
  role="meter"
  aria-valuenow="90"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="cpu_usage_label">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width: 90%">
    <rect x="0" y="0" width="100%" height="100%" fill="currentcolor"></rect>
  </svg>
</div>

In dem oben genannten Szenario, wenn der aria-valuenow-Wert aktualisiert wird, muss auch die Breite des SVG aktualisiert werden, wie in dem W3C-Arbeitsexample für Meter zu sehen ist.

• <meter>
• <progress>